import React, { Component } from "react";

/*
  事件加括号是会自执行的

  1. 内联的用 this.add.bind(this, 2)
    bind会产生新函数，新函数不会立即执行，bind的第二个参数会作为新函数的第一个参数
    不推荐使用，新函数会占内存

  2. 内联的加箭头函数 onClick={() => this.add(2)}
    每次更新以后，绑定一个看似一样的函数
    函数的地址又不一样，也会导致内存增加

  3. 使用柯理化函数(闭包)
*/

class App extends Component {
  state = {
    count: 10,
  };

  add = (n, e) => {
    // this.setState((prevState) => {
    //   return {
    //     count: prevState.count + 1,
    //   };
    // });

    console.log(n, e);
  };

  // add = (n) => (event) => {
  //   console.log(n);
  // };

  render() {
    return (
      <>
        <h2>事件的传参</h2>
        <p>count: {this.state.count}</p>
        {/* <button onClick={this.add.bind(this, 2)}>+2</button>
        <button onClick={this.add.bind(this, 3)}>+3</button> */}

        <button onClick={(e) => this.add(2, e)}>+2</button>
        <button onClick={() => this.add(3)}>+3</button>

        {/* <button onClick={this.add(2)}>+2</button>
        <button onClick={this.add(3)}>+3</button> */}
      </>
    );
  }
}

export default App;
